<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>储能报文监控</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.text_ {
	font-size: 14px;
	margin-top: 5px;
	margin-left: 5px;
	width:99%;
	hight:200px;
	color:white;
	background:black;
	overflow-y:auto;
}
</style>
<script type="text/javascript">
	var serviceip = "10.98.94.219";
	var url = "ws://" + serviceip + ":8888/";
	var conn = null;
	var isConnected = false;
	var focusEle = null;
	var count = 0;
		var stopflag=false;
	function connectService(url) {
		try {
			if (window.MozWebSocket) {
				conn = new MozWebSocket(url);
			} else {
				conn = new WebSocket(url);
			}
			conn.onmessage = function(e) {
			if(stopflag==true)return;
				if(count == 100){
					document.getElementById("test").innerHTML = "";
					count = 0;
				}
				var div = document.createElement("div");
				div.className = "text_";
				div.setAttribute("style","height:20px");
				div.innerHTML = e.data; 
				var test = document.getElementById("test");
				if (test.childNodes[0]) {
					test.insertBefore(div, test.childNodes[0]);
					test.childNodes[1].setAttribute("style","height:20px");
				} else {
					test.appendChild(div);
				}
				count++;
			};
			conn.onopen = function(e) {
				document.getElementById("socketstatus").innerHTML = "连接服务器成功";
				document.getElementById("socketstatus").style.color = "black";
				isConnected = true;
				sendMessage();
			};
			conn.onclose = function(e) {
				document.getElementById("socketstatus").innerHTML = "与服务器连接断开，正在重连...";
				document.getElementById("socketstatus").style.color = "red";
				conn = null;
				isConnected = false;
				setTimeout(sendMessage, 1000);
			}
		} catch (e) {
			document.getElementById("socketstatus").innerHTML = "无法连接报文服务器";
			document.getElementById("socketstatus").style.color = "red";
			isConnected = false;
		}
		return conn;
	}
	conn = connectService(url);

	var message = "";
	function sendMessage(type) {
		if (type) {
			if (conn != null) {
				conn.close();
			}
			serviceip = document.getElementById("serviceip").value;
			url = "ws://" + serviceip + ":7026/";
		}
		var type_ = document.getElementById("type").value;
		var code_ = document.getElementById("code").value;
		if (type_+"@"+code_ != message) {
			document.getElementById("test").innerHTML = "";
		}
		message = type_;
		if (conn == null) {
			conn == connectService(url);
		}
		if (isConnected == false)
			return;
		if (message != "") {
			conn.send(message);
		} else {
			conn.send(-1);
		}
	}

	function bodyKeyDown() {
		if (window.event.keyCode == 13) {
			if (focusEle && focusEle == "serviceip") {
				sendMessage(1);
			} else {
				sendMessage();
			}
		}
	}

	function focusElem(obj) {
		if (obj.id == "serviceip") {
			focusEle = "serviceip";
		}else if (obj.id == "code") {
			focusEle = "code";
		} else {
			focusEle = "type";
		}
	}

	function blurThis() {
		focusEle = "code";
	}
	function stopMessage(obj) {
		if(obj.value=='暂停'){
		stopflag=true;
		obj.value='继续';
		}else{
		stopflag=false;
		obj.value='暂停';
		}
	}
</script>
</head>

<body
	style="padding:0px; margin:0px;overflow:hidden; background-color:#fcfcfc;"
	onkeydown="bodyKeyDown()">
	<div style="height:49px;overflow:hidden;">
		<h1
			style="background-color:#2a4c85; padding-top:0px; margin-top:0px; height:49px; color:#fff; line-height:49px; padding-left:16px; font-size:22px; width:100%;">储能报文监控</h1>
	</div>
	<div
		style="white-space:nowrap;width:auto;float:left;margin-bottom: 14px; margin-top:10px; margin-left:15px;height:34px;">
		<b style="color:#5faee3; font-size:13px; margin-right:3px;">类型</b> <input
			type="text" id="type" value="clusterAndpackage" onfocus="focusElem(this)"
			style="width:200px; height:25px;  margin-top:10px;
		    background-color: #ffffff;
		    border: 2px solid #5ea6d6;
		    border-radius: 0px;
		    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		    color: #555555;
		    display: inline-block;
		    font-size: 13px;
		    height: 22px;
		    line-height: 22px;
		    padding: 4px 82px 4px 4px;
		    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;">
		    <b style="color:#5faee3; font-size:13px; margin-right:3px;">编码</b> <input
			type="text" id="code" value="LFT-C1-0515-02"  onfocus="focusElem(this)"
			style="width:200px; height:25px;  margin-top:10px;
		    background-color: #ffffff;
		    border: 2px solid #5ea6d6;
		    border-radius: 0px;
		    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		    color: #555555;
		    display: inline-block;
		    font-size: 13px;
		    height: 22px;
		    line-height: 22px;
		    padding: 4px 82px 4px 4px;
		    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;">
		<input
			style="background-color:#5ea6d6;cursor: pointer; padding:0 15px; margin-left:-86px; height:36px; border:none; color:#fff; font-weight:bold;"
			type="button" value="查看报文" onClick="sendMessage()">
			<input
			style="background-color:#5ea6d6;cursor: pointer; padding:0 15px; height:36px; border:none; color:#fff; font-weight:bold;"
			type="button" value="暂停" onClick="stopMessage(this)">
	</div>
	<div
		style="padding-left:20px;width:auto;white-space: nowrap;float:left;margin-bottom: 10px; color:#777777; font-size:13px; margin-top:33px;height:34px;"
		id="socketstatus"></div>
	<div
		style="padding-right:20px;width:auto;white-space: nowrap;float:right;margin-bottom: 10px; color:#777777; font-size:13px; margin-top:10px;height:34px;"
		id="socketipset">
		<b style="color:#5faee3; font-size:13px; margin-right:3px;">报文服务IP</b>
		<input type="text" id="serviceip" value="10.13.3.31"
			onfocus="focusElem(this)" onblur="blurThis()"
			style="width:200px; height:25px;  margin-top:10px;
		    background-color: #ffffff;
		    border: 2px solid #5ea6d6;
		    border-radius: 0px;
		    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		    color: #555555;
		    display: inline-block;
		    font-size: 13px;
		    height: 22px;
		    line-height: 22px;
		    padding: 4px 82px 4px 4px;
		    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;">
		<input
			style="background-color:#5ea6d6;cursor: pointer; padding:0 15px; margin-left:-76px; height:36px; border:none; color:#fff; font-weight:bold;"
			type="button" value="连接服务器" onClick="sendMessage(1)">
	</div>
	<div id="test" oncontextmenu="return false;"
		style="top:114px;background-color: black;color:white;height:auto;overflow: auto; margin:0 auto;border-radius: 4px;position: absolute;bottom: 50px;left:10px;right:10px;"></div>
	<div
		style="position: absolute;bottom: 0px;height:34px;text-align: center;width:100%; font: 13px arial">深圳市科陆电子科技股份有限公司©2015-2017</div>
</body>
</html>